import Base from "../baby/Base";
import { useAgvApi } from "../api/agv";

export default function createTimer() {
    const base = Base.getInstance()
    // 创建一个新的div元素  
    const newDiv = createInfoPanel()


    setInterval(async () => {
        const res = await useAgvApi().getAllInfo()
        const { x, y, angle, battery_level, vx, tasklist_status, current_lock, current_station, unfinished_path, target_id, task_status } = res.data.data;
        base.agv.moveAgv(x, y, angle)
        base.agv.changeLabel({
            battery: battery_level,
            speed: vx
        })

        // 高亮线路
        base.ground.changePathColor(task_status, current_station, unfinished_path)

        // 设置div的内容  
        newDiv.innerHTML = `<p> 任务名称:${tasklist_status.taskListName}</p>
        <p> 任务状态:${tasklist_status.taskListStatus}</p>
        <p> 控制者:${current_lock.nick_name ? current_lock.nick_name : '无人'}</p>
        <p> 当前站点:${current_station}</p>
        <p> 目标站点:${target_id}</p>
        <p> 未完成站点:${unfinished_path}</p>
        `

    }, 1000)
}



function createInfoPanel() {
    const newDiv = document.createElement('div');
    newDiv.style.position = 'absolute';
    newDiv.style.top = '50px'; // 你可以根据需要设置top, right, bottom, left的值  
    newDiv.style.left = '80px';
    newDiv.style.color = 'white';
    newDiv.style.fontSize = '12px';
    // 将div挂载到body上  
    document.body.appendChild(newDiv);
    return newDiv

}
